<template>
	<view class="container">
		<view class="tab-bar">
			<view class="info_bg"></view>
			<view class="tab_item" @click="navToUrl('/pages/invest/item')">
				<view class="tab_con1"><image :src="item.image"></image></view>
				<view class="tab_con2">
					<p class="text tab_title">{{ item.title }}</p>
					<p class="text">金额：{{ item.money }}</p>
					<p class="text">抽奖：{{ item.choujiang }}</p>
					<p class="text">推荐奖：{{ item.tuijian }}</p>
				</view>
				<view class="tab_con3">
					<p class="text tab_prod">周期：{{ item.period }}</p>
					<p class="text">收益：{{ item.shouyi }}</p>
					<p class="text">积分：{{ item.jifen }}</p>
				</view>
			</view>
		</view>
		<view class="tab-bar" style="padding: 4vw; height: 44vw; margin-bottom: 20vw;">
			<view class="info_bg"></view>
			<view class="info_main">{{item.detail}}</view>
		</view>
		
		<view class="btn_list">
			<view class="btn draw" @tap="showOrder(1)">体验金签约</view>
			<view class="btn recharge" @tap="showOrder(2)">余额签约</view>
		</view>
		
		<!-- <popup-bottom :show="showtrial" @close="showtrial=false" borderRadius='20'>
			<view class="contenta">
				<view class="order_tit">体验金订阅</view>
				<view class="order_detail">
					<view class="det_item">
						<view class="det_l">产品价格</view>
						<view class="det_r"><span>{{ detail.min }}</span> 元</view>
					</view>
					<view class="det_item">
						<view class="det_l">产品总收益</view>
						<view class="det_r"><span>{{ parseFloat(detail.day_money * detail.day).toFixed(2) }}</span> 元</view>
					</view>
					<view class="det_item">
						<view class="det_l">开始时间</view>
						<view class="det_r"><span>{{ detail.time }}</span></view>
					</view>
					<view class="det_item">
						<view class="det_l">结束时间</view>
						<view class="det_r"><span>{{ detail.endtime }}</span></view>
					</view>
					<view class="det_item">
						<view class="det_l">产品期限</view>
						<view class="det_r"><span>{{ detail.day }}</span> 天</view>
					</view>
				</view>
				
				<view class="canuse">
					<view class="canuse_l" @tap="readAgreement">《用户订阅协议》</view>
					<view class="canuse_r">
						<view class="canuse_tit">可用体验金</view>
						<view class="canuse_money"><span>{{ usertrial }}</span></view>
					</view>
				</view>
				
				<view class="submit_order" @click="submitTrialOrder">确认订阅</view>
			</view>
		</popup-bottom>
		<popup-bottom :show="showPopu" @close="showPopu=false" borderRadius='20'>
			<view class="contenta">
				<view class="order_tit">余额订阅</view>
				<view class="order_detail">
					<view class="det_item">
						<view class="det_l">产品价格</view>
						<view class="det_r"><span>{{ detail.min }}</span> 元</view>
					</view>
					<view class="det_item">
						<view class="det_l">产品总收益</view>
						<view class="det_r"><span>{{ parseFloat(detail.day_money * detail.day).toFixed(2) }}</span> 元</view>
					</view>
					<view class="det_item">
						<view class="det_l">开始时间</view>
						<view class="det_r"><span>{{ detail.time }}</span></view>
					</view>
					<view class="det_item">
						<view class="det_l">结束时间</view>
						<view class="det_r"><span>{{ detail.endtime }}</span></view>
					</view>
					<view class="det_item">
						<view class="det_l">产品期限</view>
						<view class="det_r"><span>{{ detail.day }}</span> 天</view>
					</view>
				</view>
				
				<view class="canuse">
					<view class="canuse_l" @tap="readAgreement">《用户订阅协议》</view>
					<view class="canuse_r">
						<view class="canuse_tit">可用余额</view>
						<view class="canuse_money"><span>{{ usercoin }}</span></view>
					</view>
				</view>
				
				<view class="submit_order" @click="submit()">确认订阅</view>
			</view>
		</popup-bottom>		
		<uni-popup ref="popupDialog" type="dialog">
			<uni-popup-dialog type="ok" :content="message" :show-cancel-button="false"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup> -->
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue'
	// import popupBottom from '@/components/uni-popup/uni-popup-bottom.vue'
	// import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue'
	export default {
		components: {
			tabBar,
			// popupBottom,
			// payKeyboard
		},
		data() {
			return {
				user_bg: '',
				avatar: '/static/icon_avatar.png',
				userinfo: [],
				list: [],
				ifOnShow: false,
				unit: '',
				showPopu: false,
				showtrial: false,
				item:{
					id: 1,
					image: '../../static/images/logo-shouye.png',
					title: 'ChatGPT',
					period: 7,
					money: 2000.00,
					shouyi: 20.00,
					choujiang: 1,
					jifen: 6,
					tuijian: '一级2%，二级1%',
					detail: 'ChatGPT（全名：Chat Generative Pre-trained Transformer），是OpenAI研发的一款聊天机器人程序，于2022年11月30日发布。ChatGPT是人工智能技术驱动的自然语言处理工具，它能够基于在预训练阶段所见的模式和统计规律，来生成回答，还能根据聊天的上下文进行...'
				},
				detail:{
					min: 500,
					day_money: 100,
					day: 5,
					time: '2024-03-28',
					endtime: '2024-4-28'
				},
				message: "订阅成功，查看我的订阅",
				usercoin: 0,
				usertrial: 0,
				showTrialOrderKeyBoard: false,
				showKeyBoard: false,
			};
		},
		onHide() {
			this.ifOnShow = true
		},
		onShow() {
			if (this.ifOnShow) {
				this.getData();
			}
		},
		onLoad: function(option) {
			this.getData();
		},
		methods: {
			//user数据
			getData: function() {
				//获取基础参数
				// uni.showLoading({
				// 	title: "数据加载中",
				// 	mask: true
				// })
				var info = uni.getStorageSync("userinfo");
				if (info.token) {
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['username=' + info.username, 'token=' + info.token, 'timestamp=' +
						timestamp
					]);
					this.helper.req({
						api: "getUserInfo",
						timestamp: timestamp,
						data: {
							username: info.username,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: 'GET',
					}).then(res => {
						
					})
				} else {
					// uni.hideLoading();
				}
			},
			navToUrl: function(url) {
				console.log('url:',url)
				return uni.navigateTo({
					url: url
				});
			},
			imageError: function(e) {
				this.avatar = '/static/icon_avatar.png';
			},
			funcChange(index){
				console.log(index)
				this.navToUrl(this.funcList[index].url)
			},
			showOrder: function(type){
				// if (type===2){
				// this.showPopu = true
				// }else if (type===1){
				// 	//console.log('1111')
				// 	this.showtrial = true
				// }
				this.navToUrl('/pages/invest/invest?type='+type)
			},
		},
	};
</script>

<style lang="scss">
	page {
		color: #56595d;
		background-color: #ddeafd;
	}
	
	.tab-bar {
		width: 96vw;
		height: 40vw;
		margin: 4vw 2vw;
		position: relative;
		
		.info_bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: #a3beff;
			opacity: 0.3;
			border-radius:10px;
		}
		
		.item_image{
			width: 36vw;
			height: 36vw;
			padding: 4vw;
			float: left;
			image{
				width: 28vw;
				height: 28vw;
			}
		}
		.item_r{
			float: right;
			width: 60vw;
			height: 36vw;
			padding: 4vw 2vw 4vw 0;
			color:#fff;
			.item_tit{
				line-height: 40px;
				font-size: 18px;
				font-weight: bold;
				width: 58vw;
				height: 40px;
				overflow: hidden;
			}
			.item_contain{
				line-height: 22px;
				font-size: 15px;
				width: 58vw;
				height: 50px;
				overflow: hidden;
			}
			.item_date{
				line-height: 24px;
				font-size: 14px;
				width: 58vw;
				text-align: right;
			}
		}
		
		.tab_item{
			width: 96vw;
			height: 40vw;
			padding: 3vw;
			display: flex;
			position: absolute;
			top: 0;
			left: 0;
			
			.tab_con1{
				width: 20%;
				height: 80px;
				image{
					width: 60px;
					height: 40px;
				}
			}
			.tab_con2{
				width: 58%;
				height: 80px;
				color:#fff;
				font-size: 16px;
				p{
					line-height: 30px;
				}
				
				.tab_title{
					font-size: 20px;
					padding: 0 0 10px;
				}
			}
			.tab_con3{
				width: 20%;
				height: 80px;
				color:#fff;
				font-size: 16px;
				p{
					line-height: 30px;
				}
				.tab_prod{
					font-size: 16px;
					padding: 0 0 10px;
					color: #7AE6FF;
				}
			}
		}
		
		.info_main{
			width: 88vw;
			height: 36vw;
			color: #fff;
			font-size: 16px;
			line-height: 6vw;
			overflow: hidden;
		}
	}
	
	.btn_list{
		width: 100vw;
		.btn{
			width: 70vw;
			height: 12vw;
			line-height: 12vw;
			text-align: center;
			color:#fff;
			font-size: 18px;
			border-radius: 6vw;
			border:1px solid #5992D7;
			margin: 8vw 15vw; 
			font-weight: bold;
		}
		.draw{
			color:#5992D7;
			background: #f9f9f9;
		}
		.recharge{
			background: linear-gradient( 180deg, #50A7FF 0%, #3267FF 100%);
		}
	}
	
	
	.contenta {
	    width: 100%;
		min-height: 300px;
		padding: 10px;
		background: #fff;
		font-size: 14px;
		// line-height: 24px;
	}
	.order_tit{
		line-height: 30px;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		border-bottom: 1px solid #EEE;
	}
	.order_detail{
		margin: 10px 0 0;
		padding: 10px;
		background-color: #f5f6fa;
		font-size: 14px;
		height: 194px;
	}
	.det_item{
		width: 100%;
		line-height: 36px;
	}
	.det_l{
		font-size: 14px;
		width: 30%;
		float:left;
	}
	.det_r{
		font-size: 14px;
		width: 70%;
		float:right;
		text-align: right;
	}
	.det_r span{
		color:#333;
		font-weight: bold;
		font-size: 17px;
		// padding: 0 6px;
	}
	.canuse{
		width: 100%;
		height: 50px;
		margin-top: 14px;
	}
	.canuse_l{
		width: 40%;
		float:left;
		padding: 8px 10px;
	}
	.canuse_r{
		width: 58%;
		float:right;
		position: relative;
	}
	.canuse_tit{
		height: 30px;
		line-height: 40px;
		width: 80px;
		position: absolute;
		left: 0;
		top: 0;
		// float: right;
		text-align: right;
	}
	.canuse_money{
		line-height: 30px;
		min-width: 80px;
		float: right;
		color: #2190ff;
		font-size: 32px;
		padding-right: 4px;
		text-align: right;
	}
	
	.submit_order{
		width: 100%;
		padding: 10px;
		background: linear-gradient( 180deg, #50A7FF 0%, #3267FF 100%);
		color: #fff;
		font-size: 16px;
		text-align: center;
		border-radius: 6px;
	}
</style>